import React from 'react';
import { Card } from 'antd';
// import echartTheme from './../themeLight'
//不是按需加载的话文件太大
//import echarts from 'echarts'
//下面是按需加载
import echarts from 'echarts/lib/echarts'
//导入折线图
import 'echarts/lib/chart/line';  //折线图是line,饼图改为pie,柱形图改为bar
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import ReactEcharts from 'echarts-for-react';
export default class Line extends React.Component {

  componentWillMount () {
    //主题的设置要在willmounted中设置
    // echarts.registerTheme('Imooc',echartTheme);
  }
  getOption = (title) => {
    let option = {
      title: {
        text: title,
        left: 30,
        textStyle:{
          fontSize: 16
        },
        top: 20
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      color: ['#15aa50','#ff4242','#f78b2c','#fed732'],
      legend: {
        left: 30,
        bottom: 20,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: 100,
        top: 80,
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      dataZoom: [
        {
          type: 'slider',
          show: true,
          bottom: 60,
          start: 30,
          end: 70,
        }
      ],
      series: [
        {
          name: '全天可用性正常',
          type: 'line',
          areaStyle: {
            opacity: 0.7
          },
          emphasis: {
            focus: 'series'
          },
          data: [20, 182, 191, 234, 290, 330, 110]
        },
        {
          name: '可用性异常',
          type: 'line',
          areaStyle: {
            opacity: 0.7
          },
          emphasis: {
            focus: 'series'
          },
          data: [120, 132, 101, 134, 90, 230, 210]
        }
      ]
    };
    return option
  }

  render () {
    let { data, title } = this.props;
    return (
      <div>
        <ReactEcharts option={this.getOption(title)} theme="Imooc" style={{ height: '300px' }} />
      </div>
    )
  }
}